<template>
  <div class="components-container">
    <aside>drag-list base on
      <a href="https://github.com/SortableJS/Vue.Draggable" target="_blank">Vue.Draggable</a>
    </aside>
    <div class="editor-container">
      <dnd-list :list1="list1" :list2="list2" list1-title="List" list2-title="Article pool" />
    </div>
  </div>
</template>

<script>
import DndList from '@/components/DndList'
import { fetchList } from '@/api/article'

export default {
  name: 'DndListDemo',
  components: { DndList },
  data() {
    return {
      list1: [
        {
          id: 1,
          timestamp: 1234556789,
          author: '@first',
          reviewer: '@first',
          title: '@title(5, 10)',
          content_short: 'mock data',
          content: 'baseContent',
          forecast: '@float(0, 100, 2, 2)',
          importance: '@integer(1, 3)',
          'type|1': ['CN', 'US', 'JP', 'EU'],
          'status|1': ['published', 'draft'],
          display_time: '@datetime',
          comment_disabled: true,
          pageviews: '@integer(300, 5000)',
          image_uri: '',
          platforms: ['a-platform']
        },
        {
          id: 2,
          timestamp: 1234556789,
          author: '@first',
          reviewer: '@first',
          title: '@title(5, 10)',
          content_short: 'mock data',
          content: 'baseContent',
          forecast: '@float(0, 100, 2, 2)',
          importance: '@integer(1, 3)',
          'type|1': ['CN', 'US', 'JP', 'EU'],
          'status|1': ['published', 'draft'],
          display_time: '@datetime',
          comment_disabled: true,
          pageviews: '@integer(300, 5000)',
          image_uri: '',
          platforms: ['a-platform']
        },
        {
          id: 3,
          timestamp: 1234556789,
          author: '@first',
          reviewer: '@first',
          title: '@title(5, 10)',
          content_short: 'mock data',
          content: 'baseContent',
          forecast: '@float(0, 100, 2, 2)',
          importance: '@integer(1, 3)',
          'type|1': ['CN', 'US', 'JP', 'EU'],
          'status|1': ['published', 'draft'],
          display_time: '@datetime',
          comment_disabled: true,
          pageviews: '@integer(300, 5000)',
          image_uri: '',
          platforms: ['a-platform']
        }
      ],
      list2: [
        {
          id: 4,
          timestamp: 1234556789,
          author: '@first',
          reviewer: '@first',
          title: '@title(5, 10)',
          content_short: 'mock data',
          content: 'baseContent',
          forecast: '@float(0, 100, 2, 2)',
          importance: '@integer(1, 3)',
          'type|1': ['CN', 'US', 'JP', 'EU'],
          'status|1': ['published', 'draft'],
          display_time: '@datetime',
          comment_disabled: true,
          pageviews: '@integer(300, 5000)',
          image_uri: '',
          platforms: ['a-platform']
        },
        {
          id: 5,
          timestamp: 1234556789,
          author: '@first',
          reviewer: '@first',
          title: '@title(5, 10)',
          content_short: 'mock data',
          content: 'baseContent',
          forecast: '@float(0, 100, 2, 2)',
          importance: '@integer(1, 3)',
          'type|1': ['CN', 'US', 'JP', 'EU'],
          'status|1': ['published', 'draft'],
          display_time: '@datetime',
          comment_disabled: true,
          pageviews: '@integer(300, 5000)',
          image_uri: '',
          platforms: ['a-platform']
        },
        {
          id: 6,
          timestamp: 1234556789,
          author: '@first',
          reviewer: '@first',
          title: '@title(5, 10)',
          content_short: 'mock data',
          content: 'baseContent',
          forecast: '@float(0, 100, 2, 2)',
          importance: '@integer(1, 3)',
          'type|1': ['CN', 'US', 'JP', 'EU'],
          'status|1': ['published', 'draft'],
          display_time: '@datetime',
          comment_disabled: true,
          pageviews: '@integer(300, 5000)',
          image_uri: '',
          platforms: ['a-platform']
        }
      ]
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      this.listLoading = true
      // fetchList().then(response => {
      //   this.list1 = response.data.items.splice(0, 5)
      //   this.list2 = response.data.items
      // })
    }
  }
}
</script>

